<template>
  <a-modal
    :title="modalTitle"
    :visible="visible"
    :width="508"
    :centered="true"
    destroyOnClose
    :maskClosable="false"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="closeModal">
    <a-form
      :form="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
      @submit="handleSubmit">
      <a-form-item :label="$i18n('label.input.name')">
        <a-input v-decorator="['labelName', { rules: labelRules, initialValue: inputVal }]" />
      </a-form-item>
      <a-form-item :label="$i18n('label.color')">
        <TagColorPick
          v-decorator="['color', { initialValue: inputColor }]"
          @oncolorchange="onColorchange" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
  import * as Fiber from 'fiber';
  /* global axios,_ctxPath */
  import TagColorPick from '../tag-colorPick/index';

  export default {
    name: 'TagEditModal',
    components: {
      TagColorPick
    },
    props: {
      visible: {
        type: Boolean
      },
      handleModal: {
        // 关闭弹窗
        type: Function
      },
      callback: {
        //数据更新之后的回调，用于新增/编辑之后更新数据
        type: Function
      },
      modalType: {
        type: String,
        default: 'add'
      },
      currentLabel: {
        type: Object
      }
    },
    data() {
      return {
        loading: false,
        modalVisible: false,
        tagList: [],
        urlParamObj: {},
        form: this.$form.createForm(this, { name: 'tagColorFrom' })
      };
    },
    computed: {
      labelRules() {
        let rules = [
          { required: true, message: this.$i18n('label.not.input.label.name') },
          { max: 10, message: this.$i18n('label.name.limit') },
          {
            pattern: /^[^\\|\\"'<>]*$/,
            message: `${this.$i18n('label.security.error')}（"<>|\\\\'）`
          }
        ];
        return rules;
      },
      modalTitle() {
        return this.modalType === 'add' ? this.$i18n('label.portal.new') : this.$i18n('label.edit');
      },
      inputVal() {
        return this.currentLabel && this.currentLabel.labelName ? this.currentLabel.labelName : '';
      },
      inputColor() {
        return this.currentLabel && this.currentLabel.color ? this.currentLabel.color : '#FF4D4F';
      }
    },
    methods: {
      handleOk() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.loading = true;
            const { labelName, color } = values;
            const params = {
              labelName,
              color: color ? color : '#FF4D4F'
            };
            let url = `${_ctxPath}/rest/m3/pending/addLabel?option.n_a_s=1`;
            if (this.modalType === 'edit') {
              url = `${_ctxPath}/rest/m3/pending/updateLabel?option.n_a_s=1`;
              params.labelId = this.currentLabel.labelId;
            }
            axios
              .post(url, params)
              .then(() => {
                const msg =
                  this.modalType === 'edit'
                    ? this.$i18n('label.edit.success')
                    : this.$i18n('label.add.success');
                Fiber.message.success(msg);
                this.$emit('callback');
                this.$emit('handleModal');
                this.loading = false;
              })
              .catch((error) => {
                const data = error.response?.data;
                this.$emit('handleModal');
                Fiber.message.error(data?.message);
                this.loading = false;
              });
          }
        });
      },
      closeModal() {
        this.$emit('handleModal');
      }
    }
  };
</script>

<style lang="scss" scoped></style>
